<template>
  <div>
    <p>商品列表页</p>
    <p>vuex:{{$store.state.arr1.length}}</p>
    <div class="level">
      <p>当前等级：{{$store.state.level}}</p>
    </div>
    <button @click="levelChange">升级</button>
    <p>年龄:{{$store.state.age}}</p>
    <button @click="changeAge">长大一岁（vuex）</button>
    <router-link to="/">home</router-link>
    <ul>
      <li v-for="(item, index) in iphones" :key="index">
        <!-- 要注意路径的地址要和路由中一致 -->
        <router-link :to="'/detail/'+item.id">{{item.name}}</router-link>
        <button @click="change(item.id)">详情</button>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  data() {
    return {
      iphones: [
        {name: 'iphone12 Pro Max', price: 9999,id:'001'},
        {name: 'iphone12 Pro', price: 8999,id:'002'},
        {name: 'iphone12', price: 7999,id:'003'},
        {name: 'iphone12 mini', price: 6999,id:'007'},
      ],
      num: 999
    }
  },
  created() {
    console.log('vuex中的值：',this.$store.state.arr1.length);
  },
  methods: {
    change(id) {
      this.$router.push('/detail/'+id);
    },
    changeAge() {
      // 调用vuex的方法，修改年龄
      this.$store.commit('olding');
    },
    levelChange() {
      // 修改等级，这个数据放在vuex的store.state中，无论在哪个组件中修改，效果都一样
      this.$store.commit('levelUp', this.num);
    }
  }
}
</script>
<style scoped lang="">
  .level {
    padding: 10px;
    border: 1px solid red;
  }
</style>